/**
 * The TabItem user-interface component class
 * @class syslib.ui.TabItem
 * @author Gabriel Ricci
 */
syslib.ui.TabItem = __class();
syslib.ui.TabItem.extend(syslib.ui.VisualTag);
syslib.ui.TabItem.extend( 
/**
 * @lends syslib.ui.TabItem
 */
{
	__parentTagName : "tabpanel",
	
	id : "", 
	index : 0, 
	selector : null, 
	content : null, 

	prepare : function(){
		// set the class attributes
		this.id = (__valid(this.__attributes.id)) ? this.__attributes.id : syslib.element.generateID();
		
		// set the label
		this.__attributes.label = this.__attributes.label || "Untitled";
		
		// return
		return true;
	},

	execute : function(element){
		// tag attributes
		var attributes	= syslib.object.extend(this.__attributes, {
			"cellpadding" : 0,
			"cellspacing" : 0,
			"border" : 0,
			"class" : "tab-item-main-container",
			"id" : this.id
		});
		
		// selector structure
		var selectorStructure = ["table", attributes,
			["tbody",
	 			["tr",
					["td", {"innerName" : "left", "class": "tab-item-left-normal"}, "&nbsp;"],
					["td", {"innerName" : "middle", "class": "tab-item-middle-normal"},
						["div", {"class" : "tab-item-main-content"},
							this.__attributes.label
						]
					],
					["td", {"innerName" : "right", "class": "tab-item-right-normal"}, "&nbsp;"],
					["td", {"class" : "spacer"} ]
				]
			]
		];
		
		// content structure
		var contentStructure = ["div", {"style" : "display: none; position: relative;"},
			this.__innerHTML 
		];

		// create the main element 
		var content = syslib.element.createFromJSON(false, contentStructure);
		delete contentStructure;
		
		// create the selector element
		var selector = syslib.element.createFromJSON(false, selectorStructure);
		delete selectorStructure;
		
		// set the referentes
		this.__refs = selector.references;
		
		// set the selector
		this.selector = selector.element;
		
		// set the content and the main element
		this.content = content.element;
		this.__element = content.element;
		
		// set the selected state
		this.__element._selected = false;

		// return
		return this.content;
	},

	finalize : function(){
		// add into the tabpanel
		this.index = this.__parent.addTab(this);

		// select, if needed
		if(this.__attributes.selected === "true"){
			this.__parent.selectTab(this.index);
		}

		// set the events
		syslib.event.listen("click", this.selector, function(){
			this.__parent.selectTab(this.index);
		}.applyTo(this));
		syslib.event.listen("mouseover", this.selector, function(){
			if(this.__element._selected !== true){
				this.__over();
			}
		}.applyTo(this));
		syslib.event.listen("mouseout", this.selector, function(){
			if(this.__element._selected !== true){
				this.__unselect();
			}
		}.applyTo(this));
	},

	__select : function(){
		this.__refs.left.className			= "tab-item-left-selected";
		this.__refs.right.className		= "tab-item-right-selected";
		this.__refs.middle.className	= "tab-item-middle-selected";
		this.__element._selected			= true;
	},

	__over : function(){
		this.__refs.left.className			= "tab-item-left-over";
		this.__refs.right.className		= "tab-item-right-over";
		this.__refs.middle.className	= "tab-item-middle-over";
	},

	__unselect : function(){
		this.__refs.left.className		= "tab-item-left-normal";
		this.__refs.right.className		= "tab-item-right-normal";
		this.__refs.middle.className	= "tab-item-middle-normal";
		this.__element._selected		= false;
	}
});